import React, { memo } from 'react';
import _ from 'lodash';
import { Menu, Arrow } from '@/assets/icons';
import styles from '../index.less';

export default memo(
  ({
    nanoid,
    label,
    collapsed,
    checkedList,
    handleDelete,
    handleChangeCollapse,
    handleClearState,
  }) => {
    // console.log('========view header create or update========');
    const checkedLabels = _.map(checkedList || [], 'label');

    return (
      <div
        className={styles.cubeDropContentHeader}
        onClick={() => {
          handleChangeCollapse({ nanoid, collapsed: !collapsed });
        }}
      >
        <span className={styles.cubeDropContentHeaderIcon}>
          <Menu />
        </span>
        <span className={styles.cubeDropContentHeaderTitle}>
          {label}
          {!_.isEmpty(checkedLabels) && (
            <span className={styles.cubeDropContentHeaderTitleDescription}>
              {' '}
              = {checkedLabels.join(' , ')}
            </span>
          )}
        </span>
        <span className={styles.cubeDropContentHeaderIcon}>
          <span className={styles.cubeDropContentHeaderIconArrowTop}>
            <Arrow />
          </span>
          <span className={styles.cubeDropContentHeaderIconArrowBottom}>
            <Arrow />
          </span>
        </span>
        <span
          className={styles.cubeDropContentHeaderIcon}
          onClick={(e) => {
            e.stopPropagation();
            handleDelete(nanoid);
            handleClearState({ nanoid });
          }}
        >
          <span className={styles.cubeDropContentHeaderIconClose} />
        </span>
      </div>
    );
  },
  (prevProps, nextProps) =>
    prevProps.collapsed === nextProps.collapsed &&
    prevProps.checkedList === nextProps.checkedList,
);
